<template>
    <div class="icon">
        <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
        <MenuFoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
    </div>
</template>

<script setup>
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'


const attrs = useAttrs()
const emits = defineEmits([`update:collapsed`])

const collapsed = computed({
    get() { return attrs.collapsed },
    set(newV) { emits('update:collapsed', newV) }
})
</script>

<style scoped lang="less">
.trigger {
    font-size: 20px;
    margin-left: 24px;
}
</style>